<!--
 * @Author: DT1604\ZPL zhoupeili@dpc.com.cn
 * @Date: 2022-09-19 19:25:35
 * @LastEditors: DT1604\ZPL zhoupeili@dpc.com.cn
 * @LastEditTime: 2022-09-19 19:41:29
 * @FilePath: \eoms-ui\src\components\doalog\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog
    :visible.sync="visibleDialog"
    v-bind="$attrs"
    v-on="$listeners"
    @close="$_handleCancel"
    :width="width" :close-on-click-modal="false"
    :title="title" class="dialog-container" :fullscreen="isFullscreen"
  >
    <!--内容区域的默认插槽-->
    <slot />
    <!--使用弹框的footer插槽添加按钮-->
    <template #footer>
      <!--对外继续暴露footer插槽，有个别弹框按钮需要自定义-->
      <slot name="footer" v-if="isFooter">
        <!--将取消与确定按钮集成到内部-->
        <el-row slot="footer" type="flex" justify="end">
          <!-- <el-col :span="8">
            
          </el-col> -->
          <el-button size="small" @click="$_handleCancel">取消</el-button>
            <el-button type="primary" :loading="loading" size="small" @click="$_handleConfirm"
              >确定</el-button
            >
        </el-row>
      </slot>
    </template>
  </el-dialog>
</template>

<script>
export default {
  // 默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings)
  // 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。
  // 通过设置 inheritAttrs 到 false，这些默认行为将会被去掉
  inheritAttrs: false,

  props: {
    // 对外暴露visible属性，用于显示隐藏弹框
    visible: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: "50%",
    },
    title: {
      type: String,
      default: "",
    },
    // 是否显示底部按钮
    isFooter: {
      type: Boolean,
      default: true,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    isFullscreen:{
      type: Boolean,
      default: false,
    },
  },

  computed: {
    // 通过计算属性，对.sync进行转换，外部也可以直接使用visible.sync
    visibleDialog: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },

  methods: {
    // 对外抛出cancel事件
    $_handleCancel() {
      this.$emit("cancelDialog");
    }, // 对外抛出 confirm事件

    $_handleConfirm() {
      this.$emit("confirmDialog");
    },
  },
};
</script>
<style lang="scss">
  .dialog-container .el-dialog__body{
    min-height: 350px;
    // max-height: 70vh;
    overflow-y: auto;
  }
</style>